<!DOCTYPE html>
<!-- Ported from the OpenGL Samples Pack https://github.com/g-truc/ogl-samples/blob/master/tests/gl-320-texture-fetch.cpp -->
<html lang="en">

<head>
    <title>WebGL 2 Samples - texture_fetch</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="info">WebGL 2 Samples - texture_fetch</div>
    <p id="description">
        GLSL built-in function texelFetch is used for manual bilinear filtering.
    </p>
    
    <!-- WebGL 2 shaders -->
    <script id="vs" type="x-shader/x-vertex">
        #version 300 es
        #define POSITION_LOCATION 0
        #define TEXCOORD_LOCATION 4
        
        precision highp float;
        precision highp int;

        uniform mat4 MVP;

        layout(location = POSITION_LOCATION) in vec2 position;
        layout(location = TEXCOORD_LOCATION) in vec2 texcoord;

        out vec2 v_st;

        void main()
        {
            v_st = texcoord;
            gl_Position = MVP * vec4(position, 0.0, 1.0);
        }
    </script>

    <script id="fs" type="x-shader/x-fragment">
        #version 300 es
        precision highp float;
        precision highp int;

        uniform sampler2D diffuse;

        in vec2 v_st;

        out vec4 color;

        void main()
        {
            vec2 size = vec2(textureSize(diffuse, 0) - 1);
            vec2 texcoord = v_st * size;
            ivec2 coord = ivec2(texcoord);
            
            vec4 texel00 = texelFetch(diffuse, coord + ivec2(0, 0), 0);
            vec4 texel10 = texelFetch(diffuse, coord + ivec2(1, 0), 0);
            vec4 texel11 = texelFetch(diffuse, coord + ivec2(1, 1), 0);
            vec4 texel01 = texelFetch(diffuse, coord + ivec2(0, 1), 0);
            
            vec2 sampleCoord = fract(texcoord.xy);
            
            vec4 texel0 = mix(texel00, texel01, sampleCoord.y);
            vec4 texel1 = mix(texel10, texel11, sampleCoord.y);
            
            color = mix(texel0, texel1, sampleCoord.x);
        }
    </script>

    <script type="module" src="./texture_fetch.ts">
    </script>
    <div id="highlightedLines"  style="display: none">#L58-L61</div>
</body>

</html>
